<template>
  <VueCountTo v-bind="props" ref="vueCountTo"></VueCountTo>
</template>

<script>
// 默认从旧值开始动画
import VueCountTo from 'vue-count-to';
export default {
  components: { VueCountTo },
  props: {
    startVal: {
      type: Number,
      default: 0,
    },
    endVal: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 800,
    },
    // 是否自动从旧endVal开始变化
    startFromLastEnd: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    endVal(val, oVal) {
      if (this.startFromLastEnd) {
        this.props.startVal = oVal;
      }
      this.props.endVal = val;
    },
    startVal(val) {
      if (!this.startFromLastEnd) {
        this.props.startVal = val;
      }
    },
  },
  data() {
    return {
      props: {},
    };
  },
  created() {
    this.props = {
      ...this.$props,
      startVal: this.startVal,
      endVal: this.endVal,
      duration: this.duration,
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped></style>
